<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>

<script setup >
import { FunnelChart } from 'echarts/charts';
import { ref, computed, useAttrs, defineAsyncComponent} from 'vue';


const props = defineProps(['columns', 'data', 'editable', 'deletable', 'deleteFunction', 'deleteParams']);
const attrs = useAttrs();

// const sort_key = ref('')
// const sort_order = ref(props.columns.reduce((o, col) => (o[col['key']] = 1, o), {}))


// const filter_data = computed(() => {
//     let {data, query} = props
//     if(query != '') {
//         query = query.toLowerCase()
//         data = data.filter((row) => {
//             return Object.keys(row).some((key) => {
//                 return String(row[key]).toLowerCase().indexOf(query) > -1
//             })
//         })
//     }

//     const key = sort_key.value
//     if(key != '') {
//         const order = sort_order.value[key]
//         data.sort((a, b) => {
//             a = a[key]
//             b = b[key]
//             return (a === b ? 0 : a > b ? 1 : -1) * order
//         })
//     }

//     return data


// })

// function sortByKey(key) {
//     sort_key.value = key
//     sort_order.value[key] *= -1 
// }

const EditUserInfoModal = defineAsyncComponent(() => import("./EditUserInfoModal.vue"));
const isOpenModal = ref(false);
const modal_name = ref("")

const edit_data = ref(null)


function openModal(name, data) {
    isOpenModal.value = true;
    modal_name.value = name;
    if(name === "edit") {
        edit_data.value = data;
    }
}

</script>
<template>
    <div class="filterable-table-container" >
        <table class="filterable-table" :style="attrs.style"  >
                <tr >
                    <th v-for="(col, index) in props.columns" :key="index"  >{{ col['label'] }}</th>
                    <th>操作</th>   
                </tr>
                <template v-if="props.data != null" >

                    <tr v-for="(row, row_index) in props.data" :key="row_index" >
                        <td v-for="(col, col_index) in props.columns" :key="col_index" >{{ col['isEnumerable'] ? col['enum'].get(row[col['key']]) : row[col['key']] }}</td>
                        <td>
                            <div v-if="props.editable" class="button edit" @click="openModal('edit', row)" >编辑</div>
                            <div class="button delete" v-if="props.deletable" @click="() => props.deleteFunction(props.deleteParams.reduce( (pre, cur) => (pre[cur]=row[cur], pre),{}))" >删除</div>
                        </td>
                    </tr>
                </template>
        </table>
        <EditUserInfoModal v-if="isOpenModal && modal_name == 'edit'" v-model:is-open-modal="isOpenModal" :map="props.columns" :info="edit_data" />
    </div>

</template>
<style scoped >

.filterable-table {
    border-collapse: collapse;
    border: 1px solid #ddd;
    font-size: 18px;
    background-color: #ffffff;
    border-collapse: collapse;
    border: solid 1px #bfbfbf;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    color: #707070;
    width: 100%;
}

tr {
    border-bottom: 1px solid #8a8a8a;
    font-family: Source Han Sans CN;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #707070;
}

tr:first-of-type, tr:hover {
    background-color: #f1f1f1;
}

td, th {
    text-align: left;
    padding: 12px;
    font-family: Source Han Sans CN;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #707070;
    border: solid 1px #bfbfbf;
    height: 53px;
    background-color: white;
}
th{
    border: solid 1px #bfbfbf;
    background-color: #e4e7ed;
    height: 53px;
}
.button {
    display: inline-block;
    width: 70px;
    height: 30px;
    border-radius: 5px;
    color: #ffffff;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    margin-right: 15px;
}

.button:hover {
    opacity: 0.8;
}

.button:active {
    transform: translateY(3px);
}


.edit {
    background-color: #8493a6;
}

.delete {
    background-color: #f56c6c;
}


</style>